<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script>
	
	function countCheckboxes(form) { 
		  var obj; 
		  var count = 0; 
		  for (var i=0; i<form.elements.length; i++) { 
		    obj = form.elements[i]; 
		    if (obj.type == "checkbox" && obj.checked) { 
		      count++; 
		    } 
		  } 
		  return count;
		}
	function validate() {
		  var myform	 = document.getElementById('formcompare');
	      if (countCheckboxes(myform)>=2 && countCheckboxes(myform)<=4)
	    	  {
	        return true;
	    	  }
	      else {
	        return false;
	      }
	    }
</script>
 <div class="center_content">
  <div class="center_title_bar">Products by ${requestScope.productcatalog.catalogname }</div>
 <div class="center_page_bar">
            Page 
            <!--start page-->
            <c:set var="pagecount" value="${requestScope.pagecount}"/>
            <c:forEach var="i" begin="1" end="${pagecount}">
                <a class="pageCurrent"
                <c:if test= "${page == i}">
                     style="color:red; text-decoration: underline;"
                </c:if>
                href="Products.do?catalogid=${requestScope.productcatalog.catalogid}&page=${i}&productonpage=${productonpage}&sortby=${sortby}"
                
                >${i}</a>
                <c:if test="${i < pagecount}">
                    |
                </c:if>
            </c:forEach>
            <!--end page-->                    
                <form style="float:right" name="frmProductOnPage" action="Products.do" method="get">
                    <label for="productonpage">Products on page</label>
                    <select name="productonpage" onchange="submit()">
                        <c:forEach var="i" begin="1" end="5">
                            <option
                                <c:if test="${i*2 == productonpage}">
                                    selected="selected" 
                                </c:if>
                                value="${i*2}">${i*2}</option>
                        </c:forEach>

                        <option
                            <c:if test="${productonpage == -1}">
                                selected="selected" 
                            </c:if>
                            value="-1">All</option>
                    </select>
                    <input type="hidden" name="catalogid" value="${requestScope.productcatalog.catalogid}"/>
                    <input type="hidden" name="page" value="1"/>
                     <input type="hidden" name="sortby" value="${sortby }"/>
                </form>
	</div>
    <div class="center_sort_bar" style="text-align:right">              
                <form name="frmSortby" action="Products.do" method="get">
                    <label for="Sortby">Sort by:</label>
                    <select name="sortby" onchange="submit()">
                    	<option
                            <c:if test="${sortby == -1}">
                                selected="selected" 
                            </c:if>
                            value="-1">A-Z</option>
                        <c:forEach var="i" begin="0" end="${listsortby.size()-1 }">
                            <option
                                <c:if test="${i == sortby}">
                                    selected="selected" 
                                </c:if>
                                value="${i}">${listsortby[i]}</option>
                        </c:forEach>

                        
                    </select>
                    <input type="hidden" name="catalogid" value="${requestScope.productcatalog.catalogid}"/>
                    <input type="hidden" name="page" value="1"/>
                    <input type="hidden" name="productonpage" value="${productonpage }"/>
                </form>
	</div>
  <form id = "formcompare" onsubmit ="return validate()" name="frmSortby" action="Compare.do" method="get">
			<div class="center_sort_bar" style="text-align: right"><input id = "compare" type="submit" value="Compare" name="Compare"/></div>
   <c:forEach var="product" items="${requestScope.listproduct }">
	  <div class="prod_box">
	    <div class="center_prod_box">
	      <div class="product_title"><a href="ProductDetail.do?productid=${product.productid }">${product.productname }</a></div>
	      <div class="product_img"><a href="ProductDetail.do?productid=${product.productid }"><img class="image_product" src="${product.image1 }" alt="" border="0" /></a></div>
	      <div class="prod_price"><span class="price">${product.price}$</span></div>
	      <div class="rating_area">
				<c:forEach var="j" begin="1" end="5" >   
					<input type="radio" name="rating_product${product.productid }" value="${j }" class="star" disabled="disabled"
						<c:if test="${product.rating == j  }">
							checked ="checked"
						</c:if>
					>
				</c:forEach>
	      </div>
	      <input type="checkbox" name="compareproducts"
							value="${product.productid }" />
	    </div>
	    <div class="prod_details_tab"> <a href="Cart.do?productid=${product.productid }" class="prod_buy">Add to Cart</a> <a href="ProductDetail.do?productid=${product.productid }" class="prod_details">Details</a> </div>
	  </div>
  </c:forEach>
  </form>
</div>